{% extends "ClientBundle::layout.html.twig" %}
{% block body %}

<div class="block">
    <div class="block-title">
        <h2><strong>Full Table</strong> Responsive</h2>
    </div>
    <p>The first way to make a table responsive, is to wrap it with <code>&lt;div class=&quot;table-responsive&quot;&gt;&lt;/div&gt;</code>. This way the table will be horizontally scrollable and all the data will be accessible on smaller screens (&lt; 768px). Try resizing your browser window to check it live!</p>
    <div class="table-responsive">
        <table class="table table-vcenter table-striped">
            <thead>
                <tr>
                    <th style="width: 150px;" class="text-center"><i class="gi gi-user"></i></th>
                    <th>Client</th>
                    <th>Email</th>
                    <th>Subscription</th>
                    <th style="width: 150px;" class="text-center">Actions</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="text-center"><img src="./img/placeholders/avatars/avatar9.jpg" alt="avatar" class="img-circle" /></td>
                    <td><a href="./page_ready_user_profile.php.html">client1</a></td>
                    <td>client1@example.com</td>
                    <td><a href="javascript:void(0)" class="label label-warning">Trial</a></td>
                    <td class="text-center">
                        <div class="btn-group btn-group-xs">
                            <a href="javascript:void(0)" data-toggle="tooltip" title="Edit" class="btn btn-default"><i class="fa fa-pencil"></i></a>
                            <a href="javascript:void(0)" data-toggle="tooltip" title="Delete" class="btn btn-danger"><i class="fa fa-times"></i></a>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="text-center"><img src="./img/placeholders/avatars/avatar1.jpg" alt="avatar" class="img-circle" /></td>
                    <td><a href="./page_ready_user_profile.php.html">client2</a></td>
                    <td>client2@example.com</td>
                    <td><a href="javascript:void(0)" class="label label-success">VIP</a></td>
                    <td class="text-center">
                        <div class="btn-group btn-group-xs">
                            <a href="javascript:void(0)" data-toggle="tooltip" title="Edit" class="btn btn-default"><i class="fa fa-pencil"></i></a>
                            <a href="javascript:void(0)" data-toggle="tooltip" title="Delete" class="btn btn-danger"><i class="fa fa-times"></i></a>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="text-center"><img src="./img/placeholders/avatars/avatar7.jpg" alt="avatar" class="img-circle" /></td>
                    <td><a href="./page_ready_user_profile.php.html">client3</a></td>
                    <td>client3@example.com</td>
                    <td><a href="javascript:void(0)" class="label label-info">Business</a></td>
                    <td class="text-center">
                        <div class="btn-group btn-group-xs">
                            <a href="javascript:void(0)" data-toggle="tooltip" title="Edit" class="btn btn-default"><i class="fa fa-pencil"></i></a>
                            <a href="javascript:void(0)" data-toggle="tooltip" title="Delete" class="btn btn-danger"><i class="fa fa-times"></i></a>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="text-center"><img src="./img/placeholders/avatars/avatar8.jpg" alt="avatar" class="img-circle" /></td>
                    <td><a href="./page_ready_user_profile.php.html">client4</a></td>
                    <td>client4@example.com</td>
                    <td><a href="javascript:void(0)" class="label label-success">VIP</a></td>
                    <td class="text-center">
                        <div class="btn-group btn-group-xs">
                            <a href="javascript:void(0)" data-toggle="tooltip" title="Edit" class="btn btn-default"><i class="fa fa-pencil"></i></a>
                            <a href="javascript:void(0)" data-toggle="tooltip" title="Delete" class="btn btn-danger"><i class="fa fa-times"></i></a>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="text-center"><img src="./img/placeholders/avatars/avatar6.jpg" alt="avatar" class="img-circle" /></td>
                    <td><a href="./page_ready_user_profile.php.html">client5</a></td>
                    <td>client5@example.com</td>
                    <td><a href="javascript:void(0)" class="label label-primary">Personal</a></td>
                    <td class="text-center">
                        <div class="btn-group btn-group-xs">
                            <a href="javascript:void(0)" data-toggle="tooltip" title="Edit" class="btn btn-default"><i class="fa fa-pencil"></i></a>
                            <a href="javascript:void(0)" data-toggle="tooltip" title="Delete" class="btn btn-danger"><i class="fa fa-times"></i></a>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="text-center"><img src="./img/placeholders/avatars/avatar2.jpg" alt="avatar" class="img-circle" /></td>
                    <td><a href="./page_ready_user_profile.php.html">client6</a></td>
                    <td>client6@example.com</td>
                    <td><a href="javascript:void(0)" class="label label-info">Business</a></td>
                    <td class="text-center">
                        <div class="btn-group btn-group-xs">
                            <a href="javascript:void(0)" data-toggle="tooltip" title="Edit" class="btn btn-default"><i class="fa fa-pencil"></i></a>
                            <a href="javascript:void(0)" data-toggle="tooltip" title="Delete" class="btn btn-danger"><i class="fa fa-times"></i></a>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="text-center"><img src="./img/placeholders/avatars/avatar4.jpg" alt="avatar" class="img-circle" /></td>
                    <td><a href="./page_ready_user_profile.php.html">client7</a></td>
                    <td>client7@example.com</td>
                    <td><a href="javascript:void(0)" class="label label-primary">Personal</a></td>
                    <td class="text-center">
                        <div class="btn-group btn-group-xs">
                            <a href="javascript:void(0)" data-toggle="tooltip" title="Edit" class="btn btn-default"><i class="fa fa-pencil"></i></a>
                            <a href="javascript:void(0)" data-toggle="tooltip" title="Delete" class="btn btn-danger"><i class="fa fa-times"></i></a>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<table>
    <thead>
        <tr>
            <th>Libelle</th>
            <th>Description</th>
            <th>Mots Clés</th>
        </tr>
    </thead>
    <tbody>
        {% for theme in themes %}
        <tr>
            <td>{{theme.libelle}}</td>
            <td>{{theme.description}}</td>
            <td>
                {% for mot in theme.motCles %}
                <span >{{mot.libelle}}</span>
                {% endfor %}
            </td>
        </tr>
        {% else %}
        <tr>
            <td colspan="3">Liste  Vide</td>
        </tr>
        {% endfor %}
    </tbody>
</table>
{% endblock %}